<template>
  <div>
    <Row :gutter="14">
      <i-col span="8">
        <Card class="buttons">
          <p slot="title">
            <Icon type="ios-water" :color="iconColor" :size="iconSize" />
            Buttons 按钮
          </p>
          <!-- flex & vertical align middle -->
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <Button class="btn">默认按钮</Button>
              <Button class="btn" type="primary">主色调</Button>
              <Button class="btn" type="dashed">虚线按钮</Button>
              <Button class="btn" type="text">无边框</Button>
              <br />
              <Button class="btn" type="info" shape="circle" icon="logo-apple">
                提示
              </Button>
              <Button class="btn" type="success" size="small" icon="md-add-circle">
                成功
              </Button>
              <Button class="btn" type="warning">
                <Icon type="md-warning" />
                警告
              </Button>
              <Button class="btn" type="error" icon="md-trash">
                错误
              </Button>
              <br />
              <Button class="btn" ghost>默认透明</Button>
              <Button class="btn" type="primary" ghost>
                <Icon type="ios-at-outline" />
                主色透明
              </Button>
              <Button class="btn" type="dashed" ghost>
                <Icon type="md-at" />
                虚线透明
              </Button>
              <Button class="btn" type="text" ghost>文本透明</Button>
              <br />
              <Button class="btn" type="info" ghost>
                <Icon type="ios-add-circle-outline" />
                提示
              </Button>
              <Button class="btn" type="success" ghost>
                <Icon type="md-checkmark-circle-outline" />
                成功
              </Button>
              <Button class="btn" type="warning" ghost>
                <Icon type="ios-warning-outline" />
                警告
              </Button>
              <Button class="btn" type="error" ghost>
                <Icon type="ios-nuclear-outline" />
                危险
              </Button>
              <br />
              <ButtonGroup size="small" shape="circle">
                <Button type="primary" icon="ios-skip-backward"></Button>
                <Button type="primary" icon="ios-rewind"></Button>
                <Button type="primary" :icon="playPause" @click="togglePausePlay"></Button>
                <Button type="primary" icon="ios-fastforward"></Button>
                <Button type="primary" icon="ios-skip-forward"></Button>
              </ButtonGroup>
            </div>
          </Row>
        </Card>
      </i-col>
      <i-col span="8">
        <Card>
          <p slot="title">
            <Icon type="md-speedometer" :color="iconColor" :size="iconSize" />
            Count-to 数字渐变
          </p>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <count-to :end="2534">
                <span slot="left">Total:&nbsp;</span>
                <span slot="right">&nbsp;times</span>
              </count-to>
            </div>
          </Row>
        </Card>
      </i-col>
      <i-col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="ios-alarm" :color="iconColor" :size="iconSize" />
            Collapse 手风琴
          </p>
          <Row type="flex" class="countto-page-row">
            <div class="count-to-con">
              <Collapse simple accordion v-model="curPanel">
                <template v-for="panel in panels">
                  <Panel :name="panel.idx" :key="panel.idx">
                    {{panel.title}}
                    <p slot="content">{{panel.content}}</p>
                  </Panel>
                </template>
              </Collapse>
            </div>
          </Row>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="14" style="margin-top: 14px;">
      <i-col span="8">
        <Card>
          <p slot="title">
            <Icon type="ios-color-wand" :color="iconColor" :size="iconSize" />
            Cell & Divider 单元格与分割线
          </p>
          <Row type="flex" class="countto-page-row">
            <div class="count-to-con split-con" style="height: 500px;">
              <Split mode="vertical" v-model="splitVal2" min="100px" max="350px">
                <div slot="top" class="split-panel">
                  Vue
                  <Divider type="vertical"></Divider>
                  Tensorflow
                  <Divider type="vertical"></Divider>
                  Swoole
                  <Divider>&copy; 2020 <Divider type="vertical"></Divider> Dapianzi </Divider>
                </div>
                <div slot="bottom" class="split-panel">
                  <CellGroup>
                    <Cell title="Only show titles"></Cell>
                    <Cell title="Display label content" label="label content"></Cell>
                    <Cell title="Only right titles" extra="details"></Cell>
                    <Cell title="Link" extra="details" to="/test/test2" target="_blank"></Cell>
                    <Cell title="Disabled" disabled></Cell>
                    <Cell title="Selected" selected></Cell>
                    <Cell title="With Badge" to="/test/test2">
                      <Badge :count="10" slot="extra" />
                    </Cell>
                    <Cell title="With Switch">
                      <i-switch v-model="switchVal" slot="extra" />
                    </Cell>
                  </CellGroup>
                </div>
              </Split>
            </div>
          </Row>
        </Card>
      </i-col>
      <i-col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="ios-shuffle-strong"></Icon>
            自定义单位
          </p>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <count-to :simplify="true" :unit="unit" :end="253" count-class="count-text" unit-class="unit-class">
                <span class="slot-text" slot="left">原始数据：253&nbsp;=>&nbsp;</span>
              </count-to>
              <count-to :simplify="true" :unit="unit" :end="2534" count-class="count-text" unit-class="unit-class">
                <span class="slot-text" slot="left">原始数据：2534&nbsp;=>&nbsp;</span>
              </count-to>
              <count-to :simplify="true" :unit="unit" :end="257678" count-class="count-text" unit-class="unit-class">
                <span class="slot-text" slot="left">原始数据：257678&nbsp;=>&nbsp;</span>
              </count-to>
            </div>
          </Row>
        </Card>
      </i-col>
      <i-col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="android-stopwatch"></Icon>
            可异步更新数据
          </p>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <count-to :end="asynEndVal" count-class="count-text" unit-class="unit-class">
                <span class="slot-text" slot="left">Total:&nbsp;</span>
                <span class="slot-text" slot="right">&nbsp;times</span>
              </count-to>
            </div>
          </Row>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="14" style="margin-top: 14px;">
      <i-col>
        <Card>
          <p slot="title">
            <Icon type="ios-analytics" :size="iconSize" :color="iconColor"></Icon>
            综合实例
          </p>
          <Row type="flex" class="countto-page-row">
            <div class="count-to-con split-con">
              <Split v-model="splitVal" min="200px" max="200px">
                <div slot="left" class="split-panel">
                  <Tabs v-model="leftTab">
                    <template v-for="tab in leftTabs">
                      <TabPane :label="tab.label" :icon="tab.icon" :name="tab.label" :key="tab.id">
<!--                        <component v-if="tab.component" v-bind:is="tab.component.name" v-bind="tab.component.props"></component>-->
<!--                        <div v-else v-html="tab.content"></div>-->
                          <curr-tab-pane :content="tab.content" :curr="tab.component" :level="tab.id"></curr-tab-pane>
                      </TabPane>
                    </template>
                  </Tabs>
                </div>
                <div slot="right" class="split-panel">
                  <Tabs type="card" closable @on-tab-remove="handleRightTabs">
                    <template v-for="tab in rightTabs">
                      <TabPane v-if="rightTabsContent[tab.id]" :label="tab.label" :icon="tab.icon" :key="tab.id">
                        {{tab.content}}
                      </TabPane>
                    </template>
                  </Tabs>
                </div>
              </Split>
            </div>
          </Row>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import CountTo from '_c/count-to'
import Sample from '_c/dapianzi/simple'
import SampleMenu from '_c/dapianzi/simple-menu'
import Circle1 from '_c/dapianzi/test1/circle-1'
import Circle2 from '_c/dapianzi/test1/circle-2'
import Circle3 from '_c/dapianzi/test1/circle-3'

var CurrTabPane = {
  // TODO: how does it work without functional option
  functional: true,
  name: 'CurrTabPane',
  props: ['level', 'curr', 'content'],
  mounted: function () {
    console.log(this.content ? this.content : this.curr)
  },
  render: (h, ctx) => {
    if (ctx.props.content) {
      // TODO: Why params are necessary when using JSX
      return ctx.props.content(h, ctx)
      // return h('div', 'content')
    } else if (Array.isArray(ctx.props.curr)) {
      let elems = []
      for (let curr of ctx.props.curr) {
        let conf = (JSON.parse(JSON.stringify(curr)))
        delete conf[name]
        elems.push(h(curr.name, conf))
      }
      return h('div', elems)
    } else {
      // TODO parsing observed object config
      let conf = (JSON.parse(JSON.stringify(ctx.props.curr)))
      delete conf[name]
      return h(ctx.props.curr.name, conf)
    }
  }
}
export default {
  name: 'test',
  components: {
    CountTo,
    Sample,
    SampleMenu,
    'curr-tab-pane': CurrTabPane,
    'circle-1': Circle1,
    'circle-2': Circle2,
    'circle-3': Circle3
  },
  data () {
    return {
      leftTab: 'Windows',
      rightTabsContent: {
        1: true,
        2: true,
        3: true,
        4: true
      },
      playPause: 'ios-pause',
      iconColor: '#FF9900',
      iconSize: 20,
      curPanel: '1',
      splitVal: 0.5,
      splitVal2: 0.3,
      switchVal: true,
      end: 0,
      unit: [[3, '千多'], [4, '万多'], [5, '十万多']],
      unit2: [[1, '十多'], [2, '百多'], [3, '千多'], [4, '万多'], [5, '十万多'], [6, '百万多'], [7, '千万多'], [8, '亿多']],
      asynEndVal: 487,
      integratedEndVal: 3
    }
  },
  computed: {
    ...mapState({
      panels: state => state.dapianzi.panels,
      dynamicCircle: state => state.dapianzi.dynamicCircle,
      rightTabs: state => state.dapianzi.rightTabs
    }),
    leftTabs: function () {
      return [
        {
          id: 1,
          label: 'Menus',
          icon: 'md-grid',
          component: {
            name: 'SampleMenu'
          }
        },
        {
          id: 2,
          label: 'Windows',
          icon: 'logo-windows',
          // with jsx
          component: [
            {
              name: 'circle-1',
              props: this.dynamicCircle
            },
            {
              name: 'circle-3',
              props: {
                percent: 75,
                color: '#43a3fb'
              }
            },
            {
              name: 'circle-2',
              props: {
                percent: 62,
                number: 98018032,
                color: '#43a3fb'
              }
            }
          ]
        },
        {
          id: 3,
          label: 'Linux',
          icon: 'logo-tux',
          component: {
            name: 'Sample',
            props: {

            }
          }
        },
        {
          id: 4,
          label: 'Android',
          icon: 'logo-android',
          component: {
            name: 'Page',
            props: {
              total: 100,
              showSizer: true,
              showElevator: true,
              showTotal: true,
              size: 'small'
            }
          }
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      flushCircle: 'getCircle'
    }),
    init () {
      setInterval(() => {
        this.flushCircle(new Date().getTime())
        this.asynEndVal += Math.trunc((Math.random() - 0.5) * 200)
        this.integratedEndVal += Math.trunc(Math.random() * 30)
        this.curPanel = Math.trunc(1 + Math.random() * 3).toString()

        // if (this.dynamicCircle.percent !== 100 && this.dynamicCircle.percent !== 1) {
        //   this.dynamicCircle.percent += Math.floor((Math.random() - 0.5) * 10) * 5
        //   if (this.dynamicCircle.percent >= 100) {
        //     this.dynamicCircle.percent = 100
        //     this.dynamicCircle.color = '#5cb85c'
        //   } else if (this.dynamicCircle.percent <= 0) {
        //     this.dynamicCircle.percent = 1
        //     this.dynamicCircle.color = '#ff5500'
        //   }
        // }
        // console.log(this)
      }, 2000)
    },
    render: function (config) {
      for (let d of config.data) {
        console.log('>---------------------<')
        for (let c of config.cols) {
          if (c.templet) {
            console.log(c.templet(d))
          } else {
            console.log(d[c.field])
          }
        }
      }
    },
    togglePausePlay: function () {
      this.playPause = this.playPause === 'ios-pause' ? 'ios-play' : 'ios-pause'
    },
    handleRightTabs: function (name) {
      this.rightTabsContent[this.rightTabs[name].id] = false
    },
    selectLeftTab: function (name) {
      this.leftTab = name
    }
  },
  created () {
    // this.init()
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
  .countto-page-row{
    min-height: 320px;
  }
  .count-to-con{
    display: block;
    width: 100%;
  }
  .split-con {
    margin: -16px -16px -16px;
    .split-panel {
      padding: 16px;
    }
  }
  .buttons {
    background: #657180;
    .btn {
      margin: 5px;
    }
  }
</style>
